<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { $t } from '@/locales';
import { useForm, useFormRules } from '@/hooks/common/form';
import { ApiSysCgTempletQuery, ApiSysFilesQuery, ApiUserQuery, SyscgconfigApi } from '@/api-services';
import { feature, getAPI } from '@/axios-utils';
import { queryDone } from '@/utils/api';

defineOptions({
  name: 'LocalFileSearch'
});

interface Emits {
  (e: 'reset'): void;
  (e: 'search'): void;
}

const emit = defineEmits<Emits>();

const { formRef, validate, restoreValidation } = useForm();

const model = defineModel<ApiSysCgTempletQuery>('model', { required: true });
// type RuleKey = Extract<keyof ApiSysFilesQuery, 'userEmail' | 'userPhone'>;

// const rules = computed<Record<RuleKey, App.Global.FormRule>>(() => {
//   const { patternRules } = useFormRules(); // inside computed to make locale reactive

//   return {
//     email: patternRules.email,
//     phone: patternRules.phone,

//   };
// });

const configSelectItems = ref<any>([]);
async function GetConfigSelectItems() {
  const [err, res] = await feature(getAPI(SyscgconfigApi).getSelectItems());
  queryDone(err, () => {
    if (res?.data.data) {
      if (process.env.NODE_ENV === "development")
        console.log(res.data.data)
      configSelectItems.value = res.data.data.map(it => ({
        label: it.value,
        value: it.key
      }));
      //configSelectItems.value=res.data.data;
    }
  });
}

const datetimepickerGroupRef = ref();
async function reset() {
  await restoreValidation();
  //清空日期,但是现在不知道为什么清空不了
  //datetimepickerGroupRef.value.reset();
  emit('reset');
}

async function search() {
  await validate();
  emit('search');
}

onMounted(() => {
  GetConfigSelectItems();
});


// 添加一个计算属性来处理 isEnable 的布尔值到字符串的映射
// const isEnableString = computed({
//   get: () => {
//     switch (model.value.isEnable) {
//       case true: return '1';
//       case false: return '0';
//       default: return undefined;
//     }
//   },
//   set: (value) => {
//     switch (value) {
//       case '0': model.value.isEnable = false; break;
//       case '1': model.value.isEnable = true; break;
//       default: model.value.isEnable = undefined; break;
//     }
//   }
// });
</script>

<template>
  <ElCard class="card-wrapper" :header="$t('common.search')">
    <ElForm ref="formRef" :model="model">

      <ElSpace>


        <ElFormItem :label="$t('page.codeGenerator.sysCgTemplet.cgConfigName')" style="width: 300px;">
          <ElSelect v-model="model.cgConfigId!" clearable>
            <ElOption v-for="item in configSelectItems" :key="item.value" :label="item.label" :value="item.value">
            </ElOption>
          </ElSelect>
        </ElFormItem>


        <ElFormItem :label="$t('common.keyword')" name="keyWords" style="width: 300px;">
          <ElInput v-model="model.keyWords!" :placeholder="$t('common.keywordSearch')" />
        </ElFormItem>

      </ElSpace>

      <ElSpace class="w-full justify-end" alignment="end">
        <ElButton @click="reset">
          <template #icon>
            <icon-ic-round-refresh class="text-icon" />
          </template>
          {{ $t('common.reset') }}
        </ElButton>
        <ElButton type="primary" plain @click="search">
          <template #icon>
            <icon-ic-round-search class="text-icon" />
          </template>
          {{ $t('common.search') }}
        </ElButton>
      </ElSpace>

    </ElForm>
  </ElCard>
</template>

<style scoped></style>
